{% extends "base.html" %}
{% block css %}
{% load static %}
<link rel="stylesheet" href="{% static 'css/comics.css' %}">
{% endblock %}
{% block javascript %}
{% load static %}
<script src="{% static 'js/comics.js' %}" type="text/javascript" charset="utf-8"></script>
{% endblock %}
{% block title %}
{{ comics_name }}
{% endblock %}
{% block body %}
<div class="container">
	<div class="row">
		<!-- 画布区 -->
		<!--滚轴-->
		<div class="col-sm-10 col-sm-offset-1 text-center " id="pages">
			{% for src in comics_src %}
			<img src="{{ static }}/media/{{ src }}" class="img-responsive center-block" alt="">
			{% endfor %}
		</div>
		<!--翻页-->
		<div class="col-sm-10 col-sm-offset-1 text-center hidden" id="page">
			<div class="row">
				<!-- 				<div class="col-sm-6" id="prev"></div>
				<div class="col-sm-6" id="next"></div> -->
			</div>
			<img src="#" alt="" class="img-responsive center-block">

		</div>
		<!-- 右侧工具栏区 -->
		<div class="col-sm-1" role="complementary" id="toolbar">
			<nav class="bs-docs-sidebar affix">
				<ul class="nav bs-docs-sidenav">
					<!--上一章-->
					<li>
						{% if last is not None %}
						<a href="/{{ comics_id }}_{{ last }}" title="上一章">
							<span class="btn btn-lg glyphicon glyphicon-arrow-up"></span>
						</a>
						{% endif %}
						{% if last is None %}
						<a href="javascript:void()" style="pointer-events: none;">
							<span class="btn btn-lg glyphicon glyphicon-arrow-up"></span>
						</a>
						{% endif %}
					</li>
					<!-- 滚轴or翻页 -->
					<li>
						<!--滚轴-->
						<a href="javascript:void(0);" id="more_picture" title="滚轴"><span class="btn btn-lg glyphicon glyphicon-film " ></span></a>

						<!--翻页-->
						<a href="javascript:void(0);" class="hidden" id="a_picture" title="翻页"><span class="btn btn-lg glyphicon glyphicon-picture" ></span></a>

					</li>
					<!--下一章-->
					<li>
						{% if next is not None %}
						<a href="/{{ comics_id }}_{{ next }}" title="下一章">
							<span class="btn btn-lg glyphicon glyphicon-arrow-down"></span>
						</a>
						{% endif %}
						{% if next is None %}
						<a href="javascript:void()" style="pointer-events: none;">
							<span class="btn btn-lg glyphicon glyphicon-arrow-down"></span>
						</a>
						{% endif %}
					</li>
				</ul>
			</nav>
		</div>
	</div>
</div>

{% endblock %}
